<!--
*角色编辑页面
* -->
<!DOCTYPE html>
<html>
<head>
    <title>ManaGement PlatForm</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1" name="viewport"/>
    <meta name="_csrf" content="2a049f84-561c-44bf-ae25-f24fbf78b313">
    <meta name="_csrf_header" content="X-CSRF-TOKEN">

    <script src="/wedding_admin/js/common.js"></script>
    <script src="/wedding_admin/js/jquery.min.js"></script>
    <script src="/wedding_admin/js/kendo/kendo.all.min.js"></script>
    <script src="/wedding_admin/js/jszip.min.js"></script>
    <script src="/wedding_admin/js/um/respond.min.js"></script>
    <script src="/wedding_admin/js/um/es5-shim.min.js"></script>

    <script src="/wedding_admin/js/kendo/kendo.culture.zh-CN.js"></script>
    <script src="/wedding_admin/js/kendo/kendo.messages.zh-CN.js"></script>
    <script src="/wedding_admin/js/kendo/kendo.hap.js?v=20180330"></script>
    <script src="/wedding_admin/js/um/moment.min.js"></script>
    <script src="/wedding_admin/js/um/daterangepicker.js"></script>
    <script src="/wedding_admin/js/layui/lay/dest/layui.all.js"></script>

    <script src="/wedding_admin/js/vue_table/vue.min.js"></script>
    <script src="/wedding_admin/js/vue_table/vue-validator.min.js"></script>

    <script src="/wedding_admin/js/treegrid/tree.table.js"></script>
    <script src="/wedding_admin/js/treegrid/jquery.treegrid.extension.js"></script>
    <script src="/wedding_admin/js/treegrid/jquery.treegrid.min.js"></script>
    <script src="/wedding_admin/js/ztree/jquery.ztree.all.min.js"></script>


    <link href="/wedding_admin/statics/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="/wedding_admin/statics/css/simple-line-icons.min.css" rel="stylesheet" type="text/css">
    <link href="/wedding_admin/css/ztree/css/metroStyle/metroStyle.css" rel="stylesheet" type="text/css"/>
    <link href="/wedding_admin/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="/wedding_admin/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
    <link href="/wedding_admin/css/um/kendo.common-bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="/wedding_admin/css/um/kendo.bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="/wedding_admin/css/um/kendo.hap.css" rel="stylesheet" type="text/css"/>
    <link href="/wedding_admin/css/um/daterangepicker.css" rel="stylesheet">


</head>
<style type="text/css">
    #retryWindow {
        margin-top: 10px;
    }

    #retryWindow label {
        line-height: 30px;
        text-align: right;
        box-sizing: border-box;
    }

    #retryWindow div {
        box-sizing: border-box;
    }

    .col-sm-10 {
        width: 40%;
    }

    /*input -*/
    .form-control {
        display: inline;
        width: 90%;
    }
</style>


<body>

<script type="text/javascript">

</script>
<div id="rrapp" v-cloak>
    <div id="content-container">
        <div id="page-content">
            <form class="form-horizontal">
                <input type="hidden" id="instId" name="instId">
                <div id="tab" class="col-sm-12">
                    <ul class="nav nav-tabs" id="mytab">
                        <li class="active"><a href="#statusInfo" data-toggle="tab">编辑角色信息</a></li>
                    </ul>
                    <div id="tabContent" class="tab-content">
                        <div id="statusInfo" class="tab-pane fade in active" style="margin-top: 10px;">


                            <div class="panel panel-default">
                                <form class="form-horizontal">
                                    <div class="form-group">
                                        <div class="form-group"></div>
                                        <input type="hidden" id="role_id" name="role_id"/>
                                        <div class="form-group">
                                            <div class="col-sm-2 control-label">角色名称</div>
                                            <div class="col-sm-10">

                                                <input type="text" class="form-control"
                                                       v-model="role.roleName" placeholder="角色名称"/>
                                                <em style="color: red;">*</em>
                                            </div>
                                        </div>


                                        <div class="form-group">
                                            <div class="col-sm-2 control-label">备注</div>
                                            <div class="col-sm-10">

                                                <input type="text" class="form-control"
                                                       v-model="role.remark" placeholder="备注"/>
                                            </div>
                                        </div>


                                        <div class="form-group">
                                            <div class="col-sm-2 control-label">所属部门</div>
                                            <div class="col-sm-10">
                                                <input type="text" class="form-control" style="cursor:pointer;"
                                                       @click="deptTree" v-model="role.deptName" readonly="readonly"
                                                       placeholder="所属部门"/>
                                                <em style="color: red;">*</em>
                                            </div>
                                        </div>


                                        <div class="form-group">
                                            <div class="col-sm-4 control-label"></div>
                                            <input type="button" class="btn btn-success" @click="saveOrUpdate"
                                                   value="确定" style="width: 80px"/>

                                        </div>
                                    </div>

                                    <div class="form-inline clearfix" style="margin-top:30px;margin-left:26px;">
                                        <div class="form-group col-md-4">
                                            <strong class="col-sm-5 control-label">功能权限</strong>
                                            <div class="col-sm-10">
                                                <ul id="menuTree" class="ztree"></ul>
                                            </div>
                                        </div>

                                        <div class="form-group col-md-4">
                                            <strong class="col-sm-5 control-label">门户权限</strong>
                                            <div class="col-sm-10">
                                                <ul id="doorTree" class="ztree"></ul>
                                            </div>
                                        </div>
                                        <div class="form-group col-md-3">
                                            <strong class="col-sm-5 control-label">数据权限</strong>
                                            <div class="col-sm-10">
                                                <ul id="dataTree" class="ztree"></ul>
                                            </div>
                                        </div>
                                    </div>
                                </form>

                            </div>
                        </div>


                    </div>
                </div>

                <div id="deptLayer" style="display: none;padding:10px;">
                    <ul id="deptTree" class="ztree"></ul>
                </div>
            </form>
        </div>
    </div>
    <!-- 选择部门 -->


</div>

<script>
    //部门结构树
    var dept_ztree;
    var dept_setting = {
        data: {
            simpleData: {
                enable: true,
                idKey: "deptId",
                pIdKey: "parentId",
                rootPId: -1
            },
            key: {
                url: "nourl"
            }
        }
    };

    //数据树
    var data_ztree;
    var data_setting = {
        data: {
            simpleData: {
                enable: true,
                idKey: "deptId",
                pIdKey: "parentId",
                rootPId: -1
            },
            key: {
                url: "nourl"
            }
        },
        check: {
            enable: true,
            nocheckInherit: true,
            chkboxType: {"Y": "", "N": ""}
        }
    };
    //门户树
    var door_ztree;
    var door_setting = {
        data: {
            simpleData: {
                enable: true,
                idKey: "doorId",
                pIdKey: "parentId",
                rootPId: -1
            },
            key: {
                url: "nourl"
            }
        },
        check: {
            enable: true,
            nocheckInherit: true
        }
    };
    //菜单树
    var menu_ztree;
    var menu_setting = {
        data: {
            simpleData: {
                enable: true,
                idKey: "menuId",
                pIdKey: "parentId",
                rootPId: -1
            },
            key: {
                url: "nourl"
            }
        },
        check: {
            enable: true,
            nocheckInherit: true
        }
    };

    var vm = new Vue({
        el: '#rrapp',
        data: {

            roleList: {},
            role: {

                parentId: 0,
                deptId: null,
                deptName: null,
            }

        },
        mounted() {
            //初始化执行方法
            //查询部门
            this.getDept()

            //加载门户权限
            this.getDoorTree()
            //加载功能权限
            this.getMenuTree(this.GetParam("role_id"))
            //加载数据权限
            this.getDataTree()




            //查询用户信息
            //this.getinfo()

        },
        methods: {

            getinfo: function () {

                $.get("/wedding_admin/sys/sysrole/info/" + this.GetParam("role_id"), function (r) {
                    vm.role = r.role;
                    var load = layer.load(0, {//加载动作
                        shade: false,
                        time: 2 * 10000
                    });
                    //勾选角色所拥有的部门数据权限
                    var deptIds = vm.role.deptIdList;
                    for (var i = 0; i < deptIds.length; i++) {
                        var node = data_ztree.getNodeByParam("deptId", deptIds[i]);
                        data_ztree.checkNode(node, true, false);
                    }
                    //勾选角色所拥有的菜单
                    var menuIds = vm.role.menuIdList;
                    for (var i = 0; i < menuIds.length; i++) {
                        var node = menu_ztree.getNodeByParam("menuId", menuIds[i]);
                        menu_ztree.checkNode(node, true, false);
                    }
                    //勾选角色所拥有的菜单
                    var doorIds = vm.role.doorIdList;
                    for (var i = 0; i < doorIds.length; i++) {
                        var node = door_ztree.getNodeByParam("doorId", doorIds[i]);
                        door_ztree.checkNode(node, true, false);
                    }

                    vm.getDept();
                    layer.close(load);//手动关闭
                });
            },
            getDept: function () {

                $.ajax({
                    type: "POST",
                    url: "/wedding_admin/sys/sysdept/select",
                    contentType: "application/json",
                    success: function (r) {
                        dept_ztree = $.fn.zTree.init($("#deptTree"), dept_setting, r.deptList);
                        var node = dept_ztree.getNodeByParam("deptId", vm.role.deptId);
                        if (node != null) {
                            dept_ztree.selectNode(node);
                            vm.role.deptName = node.name;
                        }
                    }
                });

            },
            deptTree: function () {
                layer.open({
                    type: 1,
                    offset: '50px',
                    skin: 'layui-layer-molv',
                    title: "选择部门",
                    area: ['300px', '450px'],
                    shade: 0,
                    shadeClose: false,
                    content: jQuery("#deptLayer"),
                    btn: ['确定', '取消'],
                    btn1: function (index) {
                        var node = dept_ztree.getSelectedNodes();
                        //选择上级部门
                        vm.role.deptId = node[0].deptId;
                        vm.role.deptName = node[0].name;
                        jQuery("#deptLayer").hide();//隐藏
                        layer.close(index);
                    }, btn2: function (index) {
                        jQuery("#deptLayer").hide();//隐藏
                    },
                    // 右上角关闭按钮触发的回调：默认会自动触发关闭。如果不想关闭，return false即可
                    cancel: function(index, layero){
                        jQuery("#deptLayer").hide();//隐藏
                    },
                });
            },
            getMenuTree: function (roleId) {

                //加载菜单树
                $.ajax({
                    type: "POST",
                    url: "/wedding_admin/sys/sysmenu/list",
                    contentType: "application/json",
                    success: function (r) {
                        menu_ztree = $.fn.zTree.init($("#menuTree"), menu_setting, r);
                        //展开所有节点
                        menu_ztree.expandAll(true);

                        if (roleId != null) {
                            vm.getinfo()
                        }
                    }
                });

            },
            getDataTree: function (roleId) {
                //加载菜单树
                $.ajax({
                    type: "POST",
                    url: "/wedding_admin/sys/sysdept/list",
                    contentType: "application/json",
                    success: function (r) {
                        data_ztree = $.fn.zTree.init($("#dataTree"), data_setting, r);
                        //展开所有节点
                        data_ztree.expandAll(true);
                    }
                });
            },
            //加载门户权限
            getDoorTree: function () {
                //加载菜单树
                $.ajax({
                    type: "POST",
                    url: "/wedding_admin/sys/sysdoor/list",
                    contentType: "application/json",
                    success: function (r) {
                        door_ztree = $.fn.zTree.init($("#doorTree"), door_setting, r);
                        //展开所有节点
                        door_ztree.expandAll(true);
                    }
                });
            }
            ,
            getRoleList: function () {
                $.get("/wedding_admin/sys/sysrole/select", function (r) {
                    vm.roleList = r.list;

                });
            },
            saveOrUpdate: function () {

                if (vm.validator()) {
                    return;
                }
                debugger

                //获取选择的菜单
                var nodes = menu_ztree.getCheckedNodes(true);
                var menuIdList = new Array();
                for (var i = 0; i < nodes.length; i++) {
                    menuIdList.push(nodes[i].menuId);
                }
                vm.role.menuIdList = menuIdList;

                //获取选择的数据
                var nodes = data_ztree.getCheckedNodes(true);
                var deptIdList = new Array();
                for (var i = 0; i < nodes.length; i++) {
                    deptIdList.push(nodes[i].deptId);
                }
                vm.role.deptIdList = deptIdList;


                //获取选择的数据
                var nodes = door_ztree.getCheckedNodes(true);
                var doorIdList = new Array();
                for (var i = 0; i < nodes.length; i++) {
                    doorIdList.push(nodes[i].doorId);
                }

                vm.role.doorIdList = doorIdList;

                var url = "/wedding_admin/sys/sysrole/update";
                $.ajax({
                    type: "POST",
                    url: url,
                    contentType: "application/json",
                    data: JSON.stringify(vm.role),
                    success: function (r) {
                        if (r.code === 0) {
                            alert('操作成功');

                            jQuery("#menuLayer").hide();//隐藏

                            var index = parent.layer.getFrameIndex(window.name) //获取窗口索引值
                            parent.location.reload();//刷新父类页面
                            // window.parent.$("#useRedit").data("kendoWindow").close();

                            // parent.layer.close(index); //关闭窗口


                        } else {
                            alert(r.msg);
                        }
                    }
                });
            }
            ,
            GetParam: function (paraName) {
                var url = document.location.toString();
                var arrObj = url.split("?");
                if (arrObj.length > 1) {
                    var arrPara = arrObj[1].split("&");
                    var arr;
                    for (var i = 0; i < arrPara.length; i++) {
                        arr = arrPara[i].split("=");
                        if (arr != null && arr[0] == paraName) {
                            return arr[1];
                        }
                    }
                    return "";
                } else {
                    return "";
                }
            },

            validator: function () {
                //校验参数
                /*  if (isBlank(vm.user.lastName)) {
                      alert("用户名称不能为空");
                      return true;
                  }*/


            }
        }
    });


</script>
</body>
</html>
